import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {XinXi} from '../../models/xin-xi';
import {NzMessageService, NzModalService, UploadFile} from 'ng-zorro-antd';
import {PublishMessageService} from './publish-message.service';
import {UEditorComponent} from 'ngx-ueditor';


@Component({
  selector: 'app-publish-message',
  templateUrl: './publish-message.component.html',
  styleUrls: ['./publish-message.component.css']
})
export class PublishMessageComponent implements OnInit {
  @ViewChild('full') full: UEditorComponent;

  /**
   * 富文本编辑框
   * @type {string}
   */
  // 将要上传的信息
  xinXi: XinXi = new XinXi();
  isLoading = false;

  nfig = {
    filebrowserBrowseUrl: '&&&&&',
    filebrowserUploadUrl: '&&&'
  };

  /**
   * 上传图片
   * @type {{uid: number; name: string; status: string; url: string}[]}
   */
  fileList = [{
    uid: -1,
    name: 'xxx.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  }];
  previewImage = '';
  previewVisible = false;
  constructor(private msg: NzMessageService,
              private modalService: NzModalService,
              private el: ElementRef,
              private publishMessageService: PublishMessageService) { }

  ngOnInit() {
  }

  /**
   * 上传图片
   * @param {UploadFile} file
   */
  handlePreview = (file: UploadFile) => {
    this.previewImage = file.url || file.thumbUrl;
    this.previewVisible = true;
  }

  /**
   * 上传按钮
   * @param value
   */
  loadTwo = (value) => {
    // 上传的数据
    console.log(this.xinXi);
    this.isLoading = true;
    // 把即将发布的信息上传给后台
    this.publishMessageService.saveXinXi(this.xinXi).subscribe(data => {
      // if (data) {
        this.isLoading = false;
      // }
    });
  }

  /**
   * 退出系统
   */
  logout() {
    this.modalService.confirm({
      title: '系统提示',
      content: '确认安全退出系统？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        window.location.href =  '/frame/publish_message';
      }
    });
  }
}
